<template>
	<view class="app-code-layout">
		<l-painter isCanvasToTempFilePath @success="posterPath = $event" css="width: 630rpx; padding: 40rpx; borderRadius:20rpx; background: #fff;">
			<l-painter-view css="display:flex;justify-content:center;">
				<l-painter-text :text="channelStore.channelType == 'QB' ? '力刷商户邀请码' : '会开店商户邀请码'"></l-painter-text>
			</l-painter-view>
			<l-painter-view css="display:flex;justify-content:center;padding:50rpx 0">
				<l-painter-qrcode css="width: 400rpx; height: 400rpx" :text="remote_register_url"></l-painter-qrcode>
			</l-painter-view>
			<l-painter-view css="display:flex;justify-content:center;">
				<l-painter-text :text="`编号：${userStore.user.agentId}`"></l-painter-text>
			</l-painter-view>
		</l-painter>
		<view class="submit-btn" style="margin-top: 60rpx;" @tap="saveAction">保存相册分享</view>
	</view>

</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import { useChannelStore,useUserStore } from '@/common/stores'
	import { app_remote_register_url_hkd,app_remote_register_url_kp } from '@/common/config/config.js'
	const channelStore = useChannelStore()
	const userStore = useUserStore()
	const posterPath = ref('')
	// 远程注册url
	const remote_register_url = ref('')
	// 保存二维码
	const saveAction = () => {
		uni.$utils.showLoading('正在保存')
		uni.saveImageToPhotosAlbum({
			filePath:posterPath.value,
			success(res) {
				uni.$utils.showToast('保存成功')
			},
			fail(err) {
				uni.$utils.showToast('保存失败')
			}
		})
	}
	//生成远程注册链接
	const createQRCodeUrl = ()=>{
		const name = encodeURIComponent(userStore.user.agentName)
		if(channelStore.channelType == 'QB'){
			remote_register_url.value = `${app_remote_register_url_kp()}?code=${userStore.user.agentId}&name=${name}`
		}
		else{
			remote_register_url.value = `${app_remote_register_url_hkd()}?code=${userStore.user.agentId}&name=${name}`
		}
	}
	onLoad(()=>{
		createQRCodeUrl()
	})
</script>

<style lang="scss" scoped>
	.app-code-layout {
		padding: 60rpx;
		.app-code-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx;
			margin-bottom: 50rpx;
			font-size: 28rpx;

			text:nth-of-type(1) {
				margin-bottom: 50rpx;
			}

			text:nth-of-type(2) {
				margin-top: 50rpx;
			}

			.qrcode-box {
				width: 400rpx;
				height: 400rpx;
			}
		}
	}
</style>